<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
    <div>
        <h1>Jquery Ajax 01</h1>
        <button onclick="doAjax()">$.ajax(...)</button>
        <button onclick="doGet()">$.get(...)</button>
        <button onclick="doPost()">$.post(...)</button>
        <button onclick="doLoad()">$(...).load("...")</button>
        <div id="result"></div>
    </div>

    <script>

        function doLoad(){
            let requestUrl="/doAjaxGet";
            //load函数会在指定位置通过ajax方法加载数据,并将数据更新到这个位置
            $("#result").load(requestUrl,function(){//可选
                console.log("==load complete==");//加载完成以后执行
            });
        }
        function doPost(){
            let requestUrl="/doAjaxPost";
            let params="id=104&city=shijiazhuang";
            $.post(requestUrl,params,function(result){
                alert(result);
            })
        }
        function doGet(){
            let requestUrl="/doAjaxGet";
            let params="";
            $.get(requestUrl,params,function(result){
                $("#result").html(result);
            },"text")//默认为json
        }

        function doAjax() {
            let url = "/doAjaxGet";
            let params = "";
            //$符号在这里代表jquery对象
            //ajax({})为jquery种的一个ajax函数,底层封装了ajax请求过程
            $.ajax({
                url:url,//key必须为url
                data:params,
                type:"GET",//可以省略,默认为Get请求
                dataType:"text",//服务端响应到客户端的数据格式,默认为json
                //async:true,//默认异步
                //contentType:"application/json",//假如需要向服务端传递json串
                success:function (result) {//callback 回调函数
                    console.log("result",result);
                    //JS原生写法
                    //document.querySelector("#result").innerHTML=result;
                    //Jquery种的封装简化写法
                    $("#result").html(result);
                }
            });
            //假如服务端响应到客户端的数据为json格式字符串,底层会默认将其转换为json对象
        }

    </script>

</body>
</html>